<template>
	<view class="content">

		<view class="title-bar">
			<u-tabs :list="list1"  :current="current" @change="change"
							lineWidth="30" activeColor="#0DBA5A" >
			</u-tabs>

		</view>
		<view class="zhanwei"></view>

		<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
			:scroll-top="scrollToTop" :scroll-with-animation="true">
			<view class="conts-list">
				<view class="conts-item" v-for="(item, index) in contsList" :key="index" @click="toPage('/Content/Detail', item.id)">
					<image :src="item.picture" mode="fill" class="images"></image>
					<view class="my-item">
						<view class="name" style="margin-bottom: 0rpx">{{item.name}}</view>
						<!-- <view class="contents level my-conts" v-html="item.introduction"> </view> -->
						<view class="contents address" style="margin-top: 0rpx;">
							{{ item.address }}
						</view>
						<view class="contents address">
							距您{{getAdd(item) && parseFloat(getAdd(item)).toFixed(2) }}km
						</view>
						<view class="money-box">
							<view class="money"><span class="my">¥ {{ (item.price && parseFloat(item.price  / 100).toFixed(2)) || '--' }}</span> 起</view>
							<view class="rate" style="margin-top: -4rpx">
								<span v-if="!item.score">暂无评分</span>
								<u-rate active-color="#FFD100" size="32" :current="item.score * 0.5" :disabled="true" v-else>
								</u-rate>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loadmore">
				<u-loadmore :status="status" />
			</view>

		</scroll-view>
		<Nav :current="navActive"></Nav>


		<view :class="{'picker1': ac == 1, 'picker2': ac == 2, 'picker3': ac == 3  }">
			<u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"
				:defaultRegion="defaultAddress"></u-picker>
		</view>
		<!-- <u-picker v-model="shows1" mode="region" :params="params1" @confirm="confirm" :value="[province]" :defaultRegion: ['山东省']   ></u-picker> -->
		<!-- <u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"></u-picker>
		<u-picker v-model="shows" mode="region" :params="params" @confirm="confirm"></u-picker> -->
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue';
	export default {
		components: {
			Nav,
		},
		data() {
			return {
				current: 0,
				list1: [{
						name: '城市观光',
					}, {
						name: '主题乐园',
					}, {
						name: '乐游山水'
					}, {
						name: '逐海踏浪'
					}, {
						name: '爱上古迹'
					}, {
						name: '冰雪世界'
					}, {
						name: '水世界'
					}, {
						name: '实景演出'
					}, {
						name: '激情漂流'
					},
					{
						name: '文化追根'
					},
					{
						name: '度假山庄'
					},
					{
						name: '温泉养生'
					},

				],
				scrollToTop: '',
				status: 'loadmore', // this.status = 'nomore'  设置底部加载更多显示
				navActive: 1,
				contsList: [],
				myAdds: {}
			}
		},	
		onHide() {
			uni.pageScrollTo({
					 scrollTop: 1, //距离页面顶部的距离
					 duration: 0
				});
		},
		onShow() {
			this.scrollToTop = 0;
			this.getData();
			this.getAddress()
		},
		methods: {
			// 获取距离
			 getAdd(item) {
				if(!(item.position.split(',')[1] == 0)) {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
				} else {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
					let add = item.address;
					return '--'
				}
			},
			calculateDistance(lat1, lon1, lat2, lon2) {
			    const R = 6371; // 地球半径，单位：千米  
			    const dLat = this.deg2rad(lat2-lat1);  // deg2rad below  
			    const dLon = this.deg2rad(lon2-lon1);   
			    const a =   
			        Math.sin(dLat/2) * Math.sin(dLat/2) +  
			        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *   
			        Math.sin(dLon/2) * Math.sin(dLon/2);   
			    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));   
			    const d = R * c; // 距离，单位：千米  
			    return d;  
			},
			deg2rad(deg) {  
			    return deg * (Math.PI/180)  
			},
			// 获取定位
			getAddress() {
				console.log('获取地址信息')
				// http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=json&pois=1
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {;
						res.location = res.latitude + ',' + res.longitude
						// let ak = '6f5443ecb71639a8c135d88dacd5241b';
						let ak = '';
						// ak = 'GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos';
						var url = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=6f5443ecb71639a8c135d88dacd5241b&output=json&coordtype=wgs84ll&location=${res.location}`;
						_this.$http({
							url: url,
							method: 'GET',
							hideLoading: true,
							data: {},
							success: res => {
								if(res.status == 0) {
									_this.myAdds = res;
									_this.address = res.result.addressComponent.city;
									_this.city = _this.address;
								}
								// let data = res;
								// console.log('地址信息', res, 'wgs84')
							},
							fail: err => { },
							complete: e => {
								_this.getLocationData();
							}
						})
					},
					fail: function(res) {
						console.log('失败', res)
					}
				});
			},
			//页面跳转
			toPage(e, id) {
				console.log(id, '----------------');
				uni.navigateTo({
					url: `/pages/myHomeDetail/index?id=${id}`
				});
			},
			// 获取景区信息
			getData() {
				// console.log('获取景区列表')
				this.status = 'loading';
				this.$http({
					// url: this.$myApi.scenicList,
					url: this.$myApi.scenicList + '?topics=' + this.list1[this.current].name ,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						res.rows.sort((a, b) => {
						    if (a.city === this.address && b.city !== this.address) {  
						        return -1; // a 应该排在 b 前面  
						    }  
						    if (a.city !== this.address && b.city === this.address) {  
						        return 1; // b 应该排在 a 前面  
						    }  
						    return 0; // 其他情况不改变顺序  
						});  
						res.rows.map(item => {
							if((item.position.split(',')[1] == 0)) {
							
								let add = item.address;
								// let ak = '6f5443ecb71639a8c135d88dacd5241b';
								let ak = '';
								var url = `https://api.map.baidu.com/geocoding/v3/?address=${add}&output=json&ak=${ak}`;
								let adds = '';
								this.$http({
									url: url,
									method: 'GET',
									hideLoading: true,
									data: {},
									success: res => {
										
										let data = res;
										if(res.status == 0) {
											item.position = + data.result.location.lng + ','  + data.result.location.lat 
										} else {
											
										}
									
									},
									fail: err => {
										// console.log(err);
									},
									complete: e => {
										
									}
								})	
							}
						})
						this.contsList = res.rows;
					},
					fail: err => {
						console.log(err, '失敗')
					
					},
					complete:e=>{
						this.status = 'nomore'
					}
				})
			},
			// 地址选择
			GoPage(url, data) {
				uni.navigateTo({
					url: `/pages/Selectcity/index?url=${url}&address=${data}`
				});
			},
			// 详情页
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/myHomeDetail/index'
				})
			},
			getTgetTopicsData() {
				
			},
			change(index) {
				this.current = index;
				this.getTgetTopicsData();
				
				this.contsList = [];
				this.status = 'loading';
				
				// console.log('获取景区列表')
				this.$http({
					url: this.$myApi.scenicList + '?topics=' + this.list1[this.current].name ,
				
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						this.contsList = res.rows;
					},
					fail: err => {
						console.log(err, '失敗')
				
					},
					complete: e => {
						this.status = 'nomore'
					}
				})
				
				// if (index == 1) {
				// 	this.misding()
				// }
				// if (index == 0) {
				// 	this.misdings()
				// }
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-tab-bar {
			width: 120rpx !important;
			position: relative;
			left: -40rpx;
		}
	}

	.title-bar {
		position: fixed;
		top: 0rpx;
		width: 750rpx;
		height: 90rpx;
		background-color: #fff;
		z-index: 99;
		height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;



	}

	.zhanwei {
		width: 100%;
		background-color: transparent;
		height: 90rpx;
	}

	.loadmore {
		margin: 30rpx auto;
	}

	.conts-list {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 10rpx auto 30rpx;

		.conts-item {
			display: flex;
			flex-direction: row;
			width: 637rpx;
			// height: 344rpx;
			border-bottom: 1rpx solid #707070;
			margin: 0 auto;
			padding: 36rpx 3rpx 36rpx 7rpx;

			&:last-child {
				border-bottom: 0rpx;
			}
			.level {
				// color: #FFD100;
			}
			.my-conts {
				line-height: 32rpx;
				height: 32rpx;
				height: 90rpx !important;
				position: relative;
				top: -8rpx;
				display: -webkit-box;  
				  -webkit-line-clamp: 3 !important; /* 控制显示行数 */  
				  -webkit-box-orient: vertical;  
				  overflow: hidden;  
				  text-overflow: ellipsis;  
				  word-wrap: break-word; /* 防止内容被强制折行 */  
				// 
			}
			.contents {
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #676767;
				margin-top: 10rpx;
				height: 32rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			
			.address {
				-webkit-line-clamp: 1;
			}

			.rate {
				float: right;
				font-size: 24rpx;
				color: #676767;
			}

			.my-item {
				width: 374rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.money-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 16rpx;
				}
				.money {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					height: 30rpx;
					line-height: 30rpx;
					color: #676767;
					// margin-top: 24rpx;
					.my {
						font-size: 30rpx;
						margin-right: 8rpx;
					}
				}

				.loa {
					height: 30rpx;
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #676767;
				}

				.detail {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #676767;
					line-height: 38px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-bottom: 8rpx;
					height: 76rpx;
				}

				.name {
					font-size: 26rpx;
					line-height: 46rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1F1F1F;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-bottom: 12rpx;
				}
			}

			.images {
				width: 212rpx;
				height: 164rpx;
				border-radius: 10rpx;
				background-color: #eee;
				margin-right: 36rpx;
			}
		}
	}
</style>
<style>
	page {
		background-color: #EFEFEF;

	}
</style>